<!-- 
All rights Reserved, Designed By www.youyacao.com 
@Description:搜索页面
@author:成都市一颗优雅草科技有限公司     
@version V5.x 
注意：本前端源码遵循 MulanPSL-2.0开源协议（木兰宽松许可证）本内容仅限于个人参考，禁止用于其他的商业用途
需要商业用途或者定制开发等可访问songshu.youyacao.com   企业客服QQ:2853810243  官方客户·技术交流群 929353806交流群 929353806
 -->
<template>
	<view>
		<view class="head" :style="{'height':sysheight,width:width}">
			<view class="left-wrapper" @click="back">
				<uni-icons color="#999999" class="back" size="30" type="arrowleft" />
			</view>
			<view class="search-wrapper">
				<uni-search-bar ref="search" background="rgba(0,0,0,.05)" borderColor="rgba(0,0,0,.05)" radius="50" class="search"
				 placeholder="搜索用户/视频" @confirm="search" />
			</view>
			<view class="right-wrapper" @tap="search_btn">搜索</view>
		</view>
		<view class="content">
			<!-- 搜索历史 -->
			<view class="search-history" v-show="input">
				<text class="search-title">搜索</text>
				<view class="history-wrapper">
					<view class="history-item" v-for="(item,index) in history" :key="index">
						<text @click="search({'value':item})">{{item}}</text>
					</view>
				</view>
				<view class="clear" @tap="clear" v-if="history.length">
					<uni-icons type="trash" color="#999999" size="24"></uni-icons> <text>清除历史记录</text>
				</view>
			</view>
			<!-- 搜索详情 -->
			<view class="data-wrapper" v-show="!input">
				<view class="data-type-title-wrapper">
					<text class="data-type-title" :class="{active:index==0}" @tap="changeType(0)">用户</text>
					<text class="data-type-title" :class="{active:index==1}" @tap="changeType(1)">视频</text>
				</view>
				<view class="data-content-wrapper">
					<view class="data-content-user" v-show="index==0">
						<view v-for="(item,idx) in userData.data" :key="idx" class="user-item">
							<view class="user-head-wrapper" @tap="userInfo(item.id)">
								<image class="user-head" :src="formatUrl(item.head_img)" mode="widthFix"></image>
							</view>
							<view class="user-content" @tap="userInfo(item.id)">
								<text class="user-name">{{item.name}}</text>
								<text class="follow_count">粉丝 {{item.follow_count}}</text>
							</view>
							<view class="user-follow" @tap="tapFollow(idx)">
								<text :class="{'cache':item.follow!='0'}">{{item.follow!='0'?'取消关注':'关注'}}</text>
							</view>
						</view>
					</view>
					<view class="data-content-video" v-show="index==1">
						<video-page class="video-page" :videoList="videoData.data" :page="videoData.page" type="search" :style="{width:width,height:sysheight}"></video-page>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import videoPage from "@/components/video/video-page.vue"

	export default {
		components: {
			videoPage
		},
		data() {
			return {
				sysheight: 0,
				height: '667px',
				width: '',
				history: [],
				input: true,
				value: '',
				index: 0,
				userData: {
					data: [],
					page: 1,
					isMore: true
				},
				videoData: {
					data: [],
					page: 1,
					isMore: true
				}
			};
		},
		mounted() {
			this.$api.searchHistory({}).then((res) => {
				if (res.data.code == 1) {
					return;
				}
				this.history = res.data.data;
			});
		},
		created() {
			//#ifdef APP-PLUS
			plus.screen.lockOrientation("portrait-primary")
			//#endif
			this.sysheight = uni.getSystemInfoSync().windowHeight
			this.height = `${this.sysheight}px`
			let width = uni.getSystemInfoSync().windowWidth
			this.width = `${width}px`
			uni.$on('searchClick', () => {
				this.input = true;
			});
		},
		onReachBottom() {
			this.loadMore();
		},
		methods: {
			//格式化链接地址
			formatUrl(url1) {
				if (url1 == undefined) {
					return;
				}
				var index = url1.indexOf("http");
				if (index == 0) {

					return url1;

				}
				return this.$store.state.baseUrl + url1;
			},
			userInfo(uid) {
				uni.navigateTo({
					url: '/pages/index/user/other?uid=' + uid
				})
			},
			tapFollow(index) {
				var item = this.userData.data[index];
				var type = 'add';
				if (item.follow != '0') {
					//已关注
					type = 'cancel';
				}
				this.$api.followChange({
					uid: item.id,
					type: type
				}).then((res) => {
					if (res.data.code == 1) {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
						return;
					}
					this.userData.data[index].follow = this.userData.data[index].follow != '0' ? '0' : '1';
					uni.showToast({
						title: res.data.msg
					});
				})
			},
			changeType(index) {
				this.index = index;
				this.search({
					value: this.value
				})
			},
			search(e) {
				var value = e.value;
				if (value == "") {
					uni.showToast({
						title: '请输入搜索内容',
						icon: "none"
					});
					return;
				}
				this.input = false;
				this.value = value;
				if (this.index == 0) {
					this.userData.page = 1;
					this.userData.isMore = true;
					this.$api.searchUser({
						key: value,
						page: this.userData.page
					}).then((res) => {
						if (res.data.code == 1) {
							this.userData.isMore = false;
							uni.showToast({
								title: res.data.msg
							});
							return;
						}
						this.userData.data = res.data.data;
					})
				} else {
					this.videoData.page = 1;
					this.videoData.isMore = true;
					this.$api.searchVideo({
						key: value,
						page: this.videoData.page
					}).then((res) => {
						if (res.data.code == 1) {
							this.videoData.isMore = false;
							uni.showToast({
								title: res.data.msg
							});
							return;
						}
						this.videoData.data = res.data.data;
					})
				}
			},
			loadMore() {
				if (this.index == 0) {
					if (!this.userData.isMore) {
						this.userData.isMore = false;
						uni.showToast({
							title: "暂无更多数据"
						});
						return;
					}
					this.$api.searchUser({
						key: this.value,
						page: ++this.userData.page
					}).then((res) => {
						if (res.data.code == 1) {
							this.userData.isMore = false;
							uni.showToast({
								title: "暂无更多数据"
							});
							return;
						}
						for (let item of res.data.data) {
							this.userData.data.push(item);
						}

					})
				} else {
					if (!this.userData.isMore) {
						this.userData.isMore = false;
						uni.showToast({
							title: "暂无更多数据"
						});
						return;
					}
					this.$api.searchVideo({
						key: this.value,
						page: ++this.page
					}).then((res) => {
						if (res.data.code == 1) {
							this.videoData.isMore = false;
							uni.showToast({
								title: "暂无更多数据"
							});
							return;
						}
						for (let item of res.data.data) {
							this.userData.data.push(item);
						}
					})
				}

			},
			search_btn() {
				this.$refs.search.confirm()
			},
			back() {
				uni.navigateBack()
			},
			clear() {
				this.history = []
				this.$api.searchHistoryClear({})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: $uni-bg-color;
	}

	.head {

		align-items: center;
		position: fixed;
		//#ifdef APP-PLUS
		padding-top: 44rpx;
		//#endif
		z-index: 1;
		left: 0;
		right: 0;
		background: $uni-bg-color;
		width: 100%;
		display: flex;
		flex-direction: row;
		height: 88rpx;
		// background-color: red;
	}

	.left-wrapper {

		margin-left: 12rpx;
		flex-direction: row;
		// background: #007AFF;
		justify-content: center;
		flex: 1;
	}

	.right-wrapper {
		height: 88rpx;
		line-height: 88rpx;
		flex-direction: row;
		// background: #007AFF;
		justify-content: center;
		flex: 1;
		margin-right: 24rpx;
	}

	.search-wrapper {
		margin-right: 24rpx;

		// background: #09BB07;
		flex: 10;
		flex-direction: row;
		align-items: center;
		align-content: center;
		justify-content: center;

	}

	.search {
		flex: 1;
	}

	.content {
		position: relative;
		padding-top: 88rpx;
		padding-bottom: 123rpx;
		//#ifdef APP-PLUS
		padding-top: 128rpx;
		//#endif

		height: 100%;
		width: 100%;
	}

	.search-history {
		margin-top: 24rpx;
		flex-direction: column;
	}

	.search-title {
		font-weight: 800;
		font-size: 30rpx;
		margin-left: 24rpx;

	}

	.history-wrapper {
		margin-top: 24rpx;
		margin-left: 24rpx;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.history-item {
		display: inline-block;
		padding: 4rpx 16rpx;
		background-color: rgba($color: #000000, $alpha: .05);
		margin-right: 24rpx;
		margin-bottom: 24rpx;
		border-radius: 8rpx;
	}

	.clear {
		text-align: center;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		align-content: center;
		color: #999999;
	}

	.data-wrapper {
		flex-direction: column;

	}

	.data-type-title-wrapper {
		flex-direction: row;
		justify-content: center;
		align-items: center;
		align-content: center;
		text-align: center;
	}

	.data-type-title {

		padding: 24rpx 30rpx;
		font-size: 30rpx;

		&.active {
			color: $uni-text-color-active
		}
	}

	.data-content-wrapper {
		margin-top: 24rpx;

		.data-content-user {
			height: 100%;
			flex-direction: column;

			.user-item {
				padding-top: 24rpx;
				display: flex;
				// background-color: red;
				width: 750rpx;
				flex: 1;
				flex-direction: row;
				flex-wrap: nowrap;

				.user-head-wrapper {
					display: flex;
					// background-color: #8A6DE9;
					flex: 1;

					.user-head {
						width: 90rpx;
						margin-left: 24rpx;
						border-radius: 50%;
					}
				}

				.user-content {
					display: flex;
					// background-color: #007AFF;
					justify-content: center;
					margin-left: 24rpx;
					flex: 8;
					flex-direction: column;

					.user-name {
						font-size: 30rpx;
					}

					.follow_count {
						font-size: 22rpx;
						color: rgba($color: #000000, $alpha: .2);
					}
				}

				.user-follow {
					display: flex;
					// background-color: #09BB07;
					justify-content: center;
					align-content: center;
					align-items: center;
					margin-right: 24rpx;
					flex: 3;
					flex-wrap: nowrap;

					text {
						lines: 1;
						padding: 4rpx 12rpx;
						font-size: 24rpx;
						border: 1rpx solid $uni-text-color-active;
						color: $uni-text-color-active;
						border-radius: 8rpx;

						&.cache {
							background-color: rgba($color: #000000, $alpha: .05);
							color: #929292;
							border: none;
						}

					}
				}
			}

		}

		.data-content-video {}
	}
</style>
